<template>
  <div class="container">

    <div class="main-form">
      <el-form :model="codeForms" status-icon label-width="100px" class="demo-ruleForm" :rules="formRules" ref="codeFunctionRef">
        <div style="text-align: center">     <a  style="font-family: 微软雅黑; font-size: 30px">代码功能提交页</a></div>


        <el-form-item label="功能名称" prop="codeName">
          <el-input v-model="codeForms.codeName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="前端功能代码" prop="codeFront">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9}"
            placeholder="前端功能代码"
            v-model="codeForms.codeFront">
          </el-input>
        </el-form-item>

        <div style="margin: 20px 0;"></div>
        <el-form-item label="后端功能代码" prop="codeBack">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9}"
            placeholder="后端功能代码"
            v-model="codeForms.codeBack">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>\

          <el-button style="float: right" type="primary" @click="backHome()">返回首页</el-button>
        </el-form-item>
      </el-form>


    </div>
  </div>
</template>

<script>
import {uploadCode} from "../api";

export default {
  name: "CodeSubmit",
  data() {
     var checkName = (rule, value, callback) => {
       console.log("验证名称")
       if (!value) {
         return callback(new Error('代码名称不能为空'));
       }
       setTimeout(() => {
         if (!Number.isInteger(value)) {
           callback(new Error('请输入数字值'));
         } else {
           if (value < 18) {
             callback(new Error('必须年满18岁'));
           } else {
             callback();
           }
         }
       }, 1000);
     };
    /* var validatePass = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请输入密码'));
       } else {
         if (this.ruleForm.checkPass !== '') {
           this.$refs.ruleForm.validateField('checkPass');
         }
         callback();
       }
     };
     var validatePass2 = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请再次输入密码'));
       } else if (value !== this.ruleForm.pass) {
         callback(new Error('两次输入密码不一致!'));
       } else {
         callback();
       }
     };*/
    return {
      codeForms: {
        codeName: '',
        uploadId: '',
        codeBack: '',
        codeFront: ''
      },

      formRules: {
          codeName:[{
            // validator: checkName, trigger: 'blur'
          }]
/*       ,
        codeBack: [{
          validator: checkName, trigger: 'blur'
        }
        ],
        codeFront: [{
            validator: checkName, trigger: 'blur'
          }]*/
      }
    }
  },
  methods: {
    submitForm() {
      console.log("提交")
      this.$refs.codeFunctionRef.validate(async (valid) => {
        console.log("进入验证")
        if (valid) {
          let data = {
            codeName: this.codeForms.codeName,
            uploadId: window.sessionStorage.getItem("userid"),
            codeBack: this.codeForms.codeBack,
            codeFront: this.codeForms.codeFront
          }
          console.log("传入参数为:"+data)
          await uploadCode(data).then( (res)=>{
            if (res.data.code==200){
              this.$message({
                message: '代码提交成功',
                type: "success"
              })
              this.$router.push("/main");
            }  else {
              this.$message({
                message: '代码提交失败',
                type: "error"
              })
            }
          } )
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.codeFunctionRef.resetFields();
    },
    backHome(){
      this.$router.push("/main");
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
/*background-color: #5aded5*/
  background-image: url("../assets/img/img_4.png") ;
  background-size: 100% 100%;

}

.main-form {
  /*height: 100%;*/
  margin-top: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 50px;
  width: 700px;
  border-radius: 50px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #9eceec;
}
</style>
